<template>
  <div class="login_content">
    <form @submit.prevent>
      <div class="">
        <section>
          <section class="login_message">
            <input
              type="text"
              maxlength="11"
              placeholder="手机/邮箱/用户名"
              v-model="name"
            >
          </section>
          <section class="login_verification">
            <input
              type="text"
              maxlength="8"
              placeholder="密码"
              v-if="showPwd"
              v-model="pwd"
            >
            <input
              type="password"
              maxlength="8"
              placeholder="密码"
              v-else
              v-model="pwd"
            >
            <div
              class="switch switch_button"
              @click="showPwd=!showPwd"
            >
              <input type="checkbox">
              <label></label>
            </div>
          </section>
          <section class="login_message">
            <input
              type="text"
              maxlength="11"
              placeholder="验证码"
              v-model="captcha"
            >
            <img
              class="get_verification"
              src="./images/captcha.svg"
              alt="captcha"
            >
          </section>
        </section>
      </div>
      <button
        class="login_submit"
        @click="login()"
      >登录</button>
    </form>
  </div>

</template>
<script>
import { Toast } from 'mint-ui'
import axios from 'axios'
export default {
  data () {
    return {
      showPwd: false, // 是否显示密码
      name: '', // 用户名
      pwd: '', // 密码
      captcha: '', // 图形验证码
      data: []
    }
  },
  methods: {
    // 提示
    reminder (msg) {
      const instance = Toast({
        message: msg,
        position: 'middle'
      })
      setTimeout(() => {
        instance.close()
      }, 2000)
    },
    loginApi () {
      var name = this.name
      var password = this.pwd
      axios.post('http://localhost:3000/api/user/login', {
        name: name,
        password: password
      }).then((response) => {
        this.data = response.data
        console.log(this.data)
        var name = this.data[0].name
        var mobile = this.data[0].mobile
        const userMoney = {
          balance: 0.00,
          specialOffer: 0,
          integral: 0
        }
        // console.log(userMoney)
        userMoney.balance = this.data[0].balance
        userMoney.specialOffer = this.data[0].specialOffer
        userMoney.integral = this.data[0].integral
        if (response.status === 200) {
          alert('登陆成功')
          // 本地存储
          localStorage.setItem('username', name)
          localStorage.setItem('usermobile', mobile)
          localStorage.setItem('userMoney', JSON.stringify(userMoney))
          this.$router.push({ name: 'home' })
        }
      })
    },
    login () {
      // 密码登录
      if (!this.name) {
        this.reminder('用户名不正确')
      } else if (!this.pwd) {
        this.reminder('密码不正确')
      } else if (!this.captcha) {

      }
      this.loginApi()
    }
  }
}
</script>

<style scoped>
.login_message {
  position: relative;
  margin-top: 16px;
  height: 48px;
  font-size: 14px;
  background: #fff;
}
.login_content > form > div input {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: 0;
  font: 400 14px Arial;
}
.login_verification {
  position: relative;
  margin-top: 16px;
  height: 48px;
  font-size: 14px;
  background: #fff;
}
.login_content > form > div input {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: 0;
  font: 400 14px Arial;
}
.switch_button {
  font-size: 12px;
  padding: 2px 10px;
  width: 30px;
  height: 16px;
  line-height: 16px;
  color: #fff;
  position: absolute;
  top: 40%;
  right: 10px;
  transform: translateY(-50%);
}
.switch_circle {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}
.login_content > form > div input {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: 0;
  font: 400 14px Arial;
}
.get_verification {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: 0;
  color: #ccc;
  font-size: 14px;
  background: transparent;
}
.login_submit {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 30px;
  border-radius: 4px;
  background: #4cd96f;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 42px;
  border: 0;
}
</style>
